<template>
  <el-dialog
    title="图表"
    :visible.sync="visible"
    :append-to-body="true"
    top="10vh"
    width="825px"
    :before-close="handleClose">
    <div class="flex-column">
      <div class="flex-box">
        <span>查询时间</span>
        <el-date-picker
          class="ml-10"
          v-model="daterange"
          value-format="timestamp"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
        </el-date-picker>
        <el-button type="primary" class="ml-10"  plain icon="el-icon-search" @click="getData">搜索</el-button>
      </div>
      <div class="mt-20 chart-box flex-column" v-if="echartShowType.includes(deviceType)">
        <slot></slot>
        <div id="chart-box" v-show="resultData.length"></div>
        <div class="no-data" v-show="!resultData.length"></div>
      </div>
      <div class="mt-20 chart-box flex-column" v-else>
        <el-table
          max-height="300px"
          header-cell-class-name="table-header"
          v-loading="loading"
          stripe
          :data="resultData"
          style="width: 100%">

          <el-table-column
            prop="createTime"
            width="180"
            label="采集时间"
          >
          </el-table-column>
          <el-table-column
            prop="avoltageHarmonic"
            v-if="deviceType==='voltageHarmonic'"
            label="A项电压谐波"
          >
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="viewClick(row,'avoltageHarmonic','A项电压谐波')">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="bvoltageHarmonic"
            v-if="deviceType==='voltageHarmonic'"
            label="B项电压谐波">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="viewClick(row,'bvoltageHarmonic','B项电压谐波')">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="cvoltageHarmonic"
            v-if="deviceType==='voltageHarmonic'"
            label="C项电压谐波">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="viewClick(row,'cvoltageHarmonic','C项电压谐波')">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="acurrentHarmonic"
            v-if="deviceType==='currentHarmonic'"
            label="A项电流谐波">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="viewClick(row,'acurrentHarmonic','A项电流谐波')">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="bcurrentHarmonic"
            v-if="deviceType==='currentHarmonic'"
            label="B项电流谐波">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="viewClick(row,'bcurrentHarmonic','B项电流谐波')">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="ccurrentHarmonic"
            v-if="deviceType==='currentHarmonic'"
            label="C项电流谐波">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="viewClick(row,'ccurrentHarmonic','C项电流谐波')">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div id="xb-chart"></div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  import {getHistory} from "../../../api/platform/devicetable";
  import {lineOption} from "../../../config/chartOption";
  import _ from 'lodash'
  import moment from 'moment'
  const colors = ['#FFB346','#59CE75','#14C2D6']
  export default {
    name:'charts-modal',
    props:{
      deviceIds:{
        type:String,
        default:''
      },
      deviceType:{
        type:String,
        default:''
      }
    },
    computed:{
      echartShowType(){
        return Object.keys(this.legend)
      }
    },
    data(){
      return{
        visible:false,
        loading:false,
        chart:null,
        xbchart:null,
        daterange:[],
        legend:{
          humidity:[{
            name:'湿度',
            value:'humidity'
          }],
          flowCount:[
            {
              name:'智能水表',
              value:'flowCount'
            }
          ],
          temperature:[
            {
              name:'温度',
              value:'temperature'
            }
          ],
          pressure:[
            {
              name:'气压',
              value:'pressure',
            }
          ],
          acurrent:[
            {
              name:'A项电流',
              value:'acurrent'
            }
          ],
          bcurrent:[
            {
              name:'B项电流',
              value:'bcurrent'
            }
          ],
          ccurrent:[
            {
              name:'C项电流',
              value:'ccurrent'
            }
          ],
          avoltage:[
            {
              name:'A项电压',
              value:'avoltage'
            }
          ],
          bvoltage:[
            {
              name:'B项电压',
              value:'bvoltage'
            }
          ],
          cvoltage:[
            {
              name:'C项电压',
              value:'cvoltage'
            }
          ],
          powerRead:[
            {
              name:'实时值',
              value:'powerRead'
            }
          ],
        },

        resultData:[]
      }
    },
    methods:{
      viewClick(data,key,name){
        let options = _.cloneDeep(lineOption),arr= []
        data[key]&&data[key].split(',').forEach((o,i)=>{
          arr.push(Number(o));
          options.xAxis.data.push(i+1)
        })
        options.series = [{
          name,
          type:'line',
          symbolSize: 0,
          data:arr,
          lineStyle: {
            normal: {
              color: colors[0], // 线条颜色
            },
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: colors[0]
              },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 0)'
                }
              ], false),
              shadowBlur: 0
            }
          },
          itemStyle : {
            color: colors[0],
            borderColor: colors[0],
            borderWidth: 3,
          }
        }]
        options.legend.data = [name]
        this.xbchart.setOption(options,true)
      },
      handleClose(){
        this.daterange = [];
        this.visible = false
      },
      getData(){
        this.loading = true;
        const params = {
          deviceIds:this.deviceIds
        }
        if(this.daterange.length && this.daterange[0]){
          params.beginTime = this.daterange[0]
          params.endTime = this.daterange[1]
        }
        getHistory(params).then(res=>{
          console.log(_.cloneDeep(res.data.data.list));
          this.resultData= res.data.data.list||[];
          if(this.echartShowType.includes(this.deviceType)){
            this.initChart()
          }else {
            this.initXbChart()
          }
          this.loading = false
        })
      },
      initXbChart(){
        this.$nextTick(()=>{
          this.xbchart = this.$echarts.init(
            document.getElementById(`xb-chart`)
          )
          this.viewClick(this.resultData[0],this.deviceType==='currentHarmonic'?'acurrentHarmonic':'avoltageHarmonic',this.deviceType==='currentHarmonic'?'A项电流谐波':'A项电压谐波')
        })
      },
      showModal(){
        this.visible = true;
        this.getData()
      },
      initChart(){
        let option = _.cloneDeep(lineOption)
        let legend = [],xAxis = [],series = [];
        legend = this.legend[this.deviceType].map(o=>{
          return o.name
        })
        this.resultData.forEach((o,i)=>{
          xAxis.push(moment(o.createTime).format('HH:mm'))
          if(series.length){
            this.legend[this.deviceType].forEach((le,leIdx)=>{
              series[leIdx].data.push(Number(o[le.value]))
            })
          }else {
            series = this.legend[this.deviceType].map((le,leIdx)=>{
              return {
                type:'line',
                symbolSize: 0,
                name:le.name,
                data:[Number(o[le.value])],
                lineStyle: {
                  normal: {
                    color: colors[leIdx], // 线条颜色
                  },
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colors[leIdx]
                    },
                      {
                        offset: 1,
                        color: 'rgba(255, 255, 255, 0)'
                      }
                    ], false),
                    shadowBlur: 0
                  }
                },
                itemStyle : {
                  color: colors[leIdx],
                  borderColor: colors[leIdx],
                  borderWidth: 3,
                }
              }
            })
          }
        })
        option.legend.data = legend;
        option.xAxis.data = xAxis;
        option.series = series

        this.$nextTick(()=>{
          this.chart = this.$echarts.init(
            document.getElementById(`chart-box`)
          )
          this.chart.setOption(option, true)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .chart-box{
    #chart-box,.no-data{
      width: 100%;
      margin-top: 20px;
      height: 300px;
    }
  }
  #xb-chart{
    height: 300px;
  }
</style>
